<script setup>
import { ref } from 'vue';
import {  onMounted} from 'vue';
import {storeToRefs} from "pinia";
import { useUserStore} from '@/stores/UserStore.js';
// 假设这是从后端获取的数据
const user = ref({
  avatar: 'https://via.placeholder.com/150',
  name: '张三',
  bio: '热爱编程和旅行的开发者',
  socialLinks: [
    { icon: 'github', link: 'https://github.com/yourusername' },
    { icon: 'twitter', link: 'https://twitter.com/yourusername' },
    { icon: 'linkedin', link: 'https://linkedin.com/in/yourusername' }
  ]
});
const userStore  = useUserStore();
const { userInfo } = storeToRefs(userStore)
onMounted(() => {
  try {
    userStore.getUserDetail().then(user => {
      console.log("user");
    })
  } catch (error) {
    console.log(error);
  }
})
</script>

<template>
  <div class="personal-view">
    <header>
      <img :src="user.avatar" alt="User Avatar" class="avatar"/>
      <h1>{{ user.name }}</h1>
    </header>
    <section class="bio">
      <p>{{ user.bio }}</p>
    </section>
    <section class="social-links">
      <h2>社交链接</h2>
      <ul>
        <li v-for="link in user.socialLinks" :key="link.icon">
          <a :href="link.link" target="_blank">
            <i :class="'icon-' + link.icon"></i>
            {{ link.icon }}
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<style scoped lang="scss">
.personal-view {
  text-align: center;
  padding: 20px;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.bio {
  margin-bottom: 20px;
}

.social-links ul {
  list-style: none;
  padding: 0;
}

.social-links li {
  display: inline-block;
  margin: 0 10px;
}

.social-links a {
  text-decoration: none;
  color: #333;
}

.social-links a:hover {
  text-decoration: underline;
}

.icon-github, .icon-twitter, .icon-linkedin {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
  margin-right: 5px;
}

.icon-github {
  background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg');
}

.icon-twitter {
  background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/twitter.svg');
}

.icon-linkedin {
  background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/linkedin.svg');
}
</style>
